<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>木易 - 一个PHP程序员的个人博客网站</title>
    <link rel="shortcut icon" href="" type="image/x-icon">
    <!--Layui-->
    <link href="__PLUGIN__/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="__PLUGIN__/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="__HOME_CSS__/global.css" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link href="__HOME_CSS__/home.css" rel="stylesheet" />
</head>
<body>
{include file="public/nav" /}
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <!-- canvas -->
    <canvas id="canvas-banner" style="background: #393D49;"></canvas>
    <!--为了及时效果需要立即设置canvas宽高，否则就在home.js中设置-->
    <script type="text/javascript">
        var canvas = document.getElementById('canvas-banner');
        canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度
        if (screen.width >= 992) {
            canvas.height = window.innerHeight * 1 / 3;
        } else {
            canvas.height = window.innerHeight * 2 / 7;
        }
    </script>
    <!-- 这个一般才是真正的主体内容 -->
    <div class="blog-container">
        <div class="blog-main">
            <!-- 网站公告提示 -->
            <div class="home-tips shadow">
                <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                <div class="home-tips-container">
                    <span style="color: #009688">偷偷告诉大家，本博客的后台管理也正在制作，为大家准备了游客专用账号！</span>
                    <span style="color: red">网站新增留言回复啦！使用QQ登陆即可回复，人人都可以回复！</span>
                    <span style="color: red">如果你觉得网站做得还不错，来Fly社区点个赞吧！<a href="http://fly.layui.com/case/2017/" target="_blank" style="color:#01AAED">点我前往</a></span>
                    <span style="color: #009688">木易 &nbsp;—— &nbsp;一个PHP程序员的个人博客，新版网站采用Layui为前端框架，目前正在建设中！</span>
                </div>
            </div>
            <!--左边文章列表-->
            <div class="blog-main-left">
                <div id="article">
                    {volist name="res" id="val"}
                    <div class="article shadow">
                        <div class="article-left">
                            <img src="__STATIC__/uploads/{$val.image}" title="{$val.title}"/>
                        </div>
                        <div class="article-right">
                            <div class="article-title">
                                <a href="/content/{$val.id}">{$val.title}</a>
                            </div>
                            <div class="article-abstract">{$val.outline}</div>
                        </div>
                        <div class="clear"></div>
                        <div class="article-footer">
                            <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{$val.addtime}</span>
                            <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;{$val.auther}</span>
                            <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#">{$val.cate}</a></span>
                            <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;0</span>
                            <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;4</span>
                        </div>
                    </div>
                    {/volist}
                </div>
                <div class="more"><div class="layui-flow-more " style="background: #fff"><a href="javascript:;" id="more">加载更多</a></div></div>
            </div>
            <!--右边小栏目-->
            <div class="blog-main-right">
                <div class="blogerinfo shadow">
                    <div class="blogerinfo-figure">
                        <img src="__HOME_IMG__/Absolutely.jpg" alt="Absolutely" />
                    </div>
                    <p class="blogerinfo-nickname">Freedom</p>
                    <p class="blogerinfo-introduce">一枚90后程序员，PHP开发程序员</p>
                    <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;陕西 - 西安</p>
                    <hr />
                    <div class="blogerinfo-contact">
                        <a target="_blank" title="QQ交流" href="javascript:layer.msg('启动QQ会话窗口')"><i class="fa fa-qq fa-2x"></i></a>
                        <a target="_blank" title="给我写信" href="mailto:1334110361@qq.com"><i class="fa fa-envelope fa-2x"></i></a>
                        <a target="_blank" title="新浪微博" href="https://weibo.com/5229088725/"><i class="fa fa-weibo fa-2x"></i></a>
                        <a target="_blank" title="码云" href="https://gitee.com/ydc500818/"><i class="fa fa-git fa-2x"></i></a>
                    </div>
                </div>
                <div></div><!--占位-->
                <div class="blog-module shadow">
                    <div class="blog-module-title">热文排行</div>
                    <ul class="fa-ul blog-module-ul">
                        {volist name="article" id="vo"}
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">{$vo.title}</a></li>
                        {/volist}
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">最近分享</div>
                    <ul class="fa-ul blog-module-ul">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="http://pan.baidu.com/s/1c1BJ6Qc" target="_blank">Canvas</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="http://pan.baidu.com/s/1kVK8UhT" target="_blank">pagesize.js</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="https://pan.baidu.com/s/1mit2aiW" target="_blank">时光轴</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="https://pan.baidu.com/s/1nuAKF81" target="_blank">图片轮播</a></li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">友情链接</div>
                    <ul class="fa-ul blog-module-ul">
                        {volist name="data" id="link"}
                        <li><i class="fa-li fa fa-hand-o-right"></i><a target="_blank" href="{$link.url}" title="Layui">{$link.title}</a></li>
                        {/volist}
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<!-- layui.js -->
<script src="__PLUGIN__/layui/layui.js"></script>
<!-- 全局脚本 -->
<script src="__HOME_JS__/global.js"></script>
<!-- 本页脚本 -->
<script src="__HOME_JS__/home.js"></script>
<script src="__PLUGIN__/jquery/jquery-2.2.4.js"></script>
<script>
    var start=5;
    $('#more').click(function () {
        if (start>={$count}){
            $('.more').html('<div class="layui-flow-more "><div></div><div>亲，没有更多数据了，共计<span style="color: red">{$count}</span>条数据</div></div>');
        }else {
            $.ajax({
                type:'get',
                url:"{:url('get_article')}?start="+start,
                dataType:'json',
                success:function (res) {
                    $.each(res,function (index,item) {
                        $('#article').append('<div class="article shadow">\n' +
                            '                        <div class="article-left">\n' +
                            '                            <img src="/static/uploads/'+item['image']+'" title="'+item['title']+'"/>\n' +
                            '                        </div>\n' +
                            '                        <div class="article-right">\n' +
                            '                            <div class="article-title">\n' +
                            '                                <a href="/content/'+item['id']+'">'+item['title']+'</a>\n' +
                            '                            </div>\n' +
                            '                            <div class="article-abstract">'+item['outline']+'</div>\n' +
                            '                        </div>\n' +
                            '                        <div class="clear"></div>\n' +
                            '                        <div class="article-footer">\n' +
                            '                            <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;'+item['addtime']+'</span>\n' +
                            '                            <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;'+item['auther']+'</span>\n' +
                            '                            <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#">'+item['cate']+'</a></span>\n' +
                            '                            <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;0</span>\n' +
                            '                            <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;4</span>\n' +
                            '                        </div>\n' +
                            '                    </div>')
                    })
                }
            })
            start+=2;
        }
    })
</script>
</body>
</html>